
import { BrowserRouter as Router } from 'react-router-dom';
import { useRoutes, Navigate} from 'react-router-dom';

import { useContext } from 'react';
import { AuthContext, AuthProvider } from './store';
import Login from "./pages/login"
import Home from "./pages/home"
import Article from "./pages/article"
import Publish from "./pages/publish"
function Root() {
  

  const { isAuthenticated } = useContext(AuthContext);
  let element = useRoutes([
    {
      path: '/login',
      element: <Login />,
    },
    {
      path: '/',
      element: isAuthenticated ? <Navigate to="/home" /> : <Navigate to="/login" />,
    },
    {
      path: '/home',
      element: isAuthenticated ? <Home /> : <Navigate to="/login" />,
      children: [
        {
          index: true,
          element: isAuthenticated ? <Article /> : <Navigate to="/login" />,
        },
        {
          path: 'publish',
          element: isAuthenticated ? <Publish /> : <Navigate to="/login" />,
        },
      ],
    },
  ]);

  return element;
}
function App() {
  return (
    <Router>
     <AuthProvider>
         <Root />
      </AuthProvider>
    </Router>
  );
}
export default App;